<template>
  <div>
    <swiper
      :class="styles.swiper"
      indicator-color="#999"
      indicator-active-color="#333"
      :circular="true"
      :indicator-dots="false"
      :autoplay="true"
    >
      <swiper-item>
        <img :class="styles.image" :src="banner" alt="" />
      </swiper-item>
    </swiper>
    <div @click="toCity">城市筛选</div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { Swiper, SwiperItem } from '@tarojs/components';
import banner from '@/assets/baojie.jpeg';
import styles from './index.module.less';

export default {
  components: {
    Swiper,
    SwiperItem,
  },
  setup() {
    const index = ref(0);
    const toCity = () => {
      Taro.navigateTo({
        url: '/subpackages/city-select/index',
      });
    };
    return {
      index,
      banner,
      styles,
      toCity,
    };
  },
};
</script>
